<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./tools/bootstrap-3.3.7-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/login.css">
  <style>
    .inputWidth {
      width: 200px;
      display: inline-block;
    }

    .spanspan {
      color: red;
      font-size: 20px;
    }

    .cover {
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, .5);
    }

    [name="vcSpan"] {
      display: block;
      height: 30px;
    }
  </style>
</head>

<body>

  <div class="jumbotron">
    <h1>欢迎光临 GengGeng SHOP </h1>

    <span name="isLogin"></span><br><br>

    <div class="login">
      <div class="form-horizontal">
        <div class="form-group">
          <label for="username" class="col-sm-2 control-label">用户名</label>
          <div class="col-sm-10">
            <input name="name" type="text" class="form-control inputWidth" placeholder="用户名">
            <span class="spanspan"></span>
          </div>
        </div>
        <div class="form-group">
          <label for="password" class="col-sm-2 control-label">密码</label>
          <div class="col-sm-10">
            <input name="pwd1" type="password" class="form-control inputWidth" placeholder="密码">
            <span name="pwd1Span" class="spanspan"></span>
          </div>
        </div>

        <div class="form-group">
          <label for="password" class="col-sm-2 control-label">确认密码</label>
          <div class="col-sm-10">
            <input name="pwd2" type="password" class="form-control inputWidth" placeholder="确认密码">
            <span class="spanspan"></span>

          </div>
        </div>

        <div class="form-group">
          <label for="text" class="col-sm-2 control-label">昵称</label>
          <div class="col-sm-10">
            <input name="nickname" type="text" class="form-control inputWidth" placeholder="昵称">
            <span class="spanspan"></span>

          </div>
        </div>

        <div class="form-group">
          <label for="password" class="col-sm-2 control-label">验证码</label>
          <div class="col-sm-10">
            <input name="vc" type="text" class="form-control inputWidth" id="ac" placeholder="验证码">
            <a href="JavaScript:;" id="sc"></a><br>
            <span name="vcSpan" class="spanspan"></span>
          </div>
        </div>

        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <button class="btn btn-default" name="reg">注册</button>
          </div>
        </div>

        <div name="msg"></div>
      </div>
    </div>
  </div>
  <script src="./js/tools.js"></script>
  <script src="./js/myAjax.js"></script>
  <script src="./js/isLogin.js"></script>
  <script>
    // 获取注册标签对象
    const oReg = document.querySelector('[name="reg"]');

    // 写入验证码的a标签
    const oAVc = document.querySelector('#sc');

    // 获取用户名标签对象
    const oIptName = document.querySelector('[name="name"]');

    // 获取密码标签对象
    const oIptPwd1 = document.querySelector('[name="pwd1"]');

    // 获取确认密码标签对象
    const oIptPwd2 = document.querySelector('[name="pwd2"]');

    // 获取确认昵称标签对象
    const oIptNickName = document.querySelector('[name="nickname"]');

    // 获取验证码标签对象
    const oIptVc = document.querySelector('[name="vc"]');

    // 密码1 之后的span标签
    const oPwd1Span = document.querySelector('[name="pwd1Span"]');

    // 验证码 之后的span标签
    const oVcSpan = document.querySelector('[name="vcSpan"]');

    // 注册结果 div标签
    const oDivMsg = document.querySelector('[name="msg"]');

    // 写入随机验证码
    oAVc.innerHTML = myGetVc();

    // 调用函数 判断 有没有登录 设定 页面内容
    isLogin();

    // 点击标签 写入新的验证码
    // a标签 href="JavaScript:;" href属性要写成 JavaScript:; 
    // 要不然 a标签默认执行的是 点击跳转效果
    oAVc.addEventListener('click', () => {
      // 写入新的验证码
      oAVc.innerHTML = myGetVc();
    })



    // 给注册标签添加点击事件
    oReg.addEventListener('click', () => {
      // 获取标签中的数据
      // let name = oIptName.value;
      // let pwd1 = oIptPwd1.value;
      // let pwd2 = oIptPwd2.value;
      // let nickname = oIptNickName.value;
      // let vc = oIptVc.value;

      // // 密码判断
      // if (pwd1 !== pwd2) {

      //   oPwd1Span.innerHTML = '<span style="color:red">两次密码不同</span>';

      //   // 写入新的验证码
      //   oAVc.innerHTML = myGetVc();

      //   // 终止之后程序的执行
      //   return;


      // } else {
      //   oPwd1Span.innerHTML = '';
      // }

      // // 获取span标签当前写入的内容
      // let spanVc = oAVc.innerHTML;

      // // 不区分大写小的判断
      // if (vc.toLowerCase() !== spanVc.toLowerCase()) {
      //   // 如果 两个验证码不同 写入提示信息
      //   oVcSpan.innerHTML = '<span style="color:red">输入的验证码不同</span>';

      //   // 写入新的验证码
      //   oAVc.innerHTML = myGetVc();

      //   // 终止之后程序的执行
      //   return;

      // } else {
      //   // 如果 两个验证码相同 写入空内容 清除报错信息
      //   oVcSpan.innerHTML = '';
      // }
      // 执行注册操作
      setRegister();

    })



    // 注册函数
    async function setRegister() {
      let name = oIptName.value;
      let pwd1 = oIptPwd1.value;
      let pwd2 = oIptPwd2.value;
      let nickname = oIptNickName.value;

      const res = JSON.parse(await myPromise({
        url: 'http://localhost:8888/users/register',
        type: 'post',
        data: {
          username: name,
          password: pwd1,
          rpassword: pwd2,
          nickname: nickname,
        },
      }));

      // 根据 res中的结果 动态渲染生成页面
      // res中 code是 0 表示注册失败
      // res中 code是 1 表示注册成功
      if (res.code === 0) {
        oDivMsg.innerHTML = `<span style="color:red">${res.message}</span>`;
      } else if (res.code === 1) {
        // 定义变量 存储 倒计时 时间
        let num = 5;
        oDivMsg.innerHTML = `<span style="color:blue">注册成功</span>`;
        // 定时器 倒数计时，调转页面
        let time = setInterval(() => {
          // 每次将倒计时时间累减1
          num--;
          if (num === 0) {
            clearInterval(time);
            window.location.href = './index.html';
            return;
          }
          // 将 结果 写入到定时器中
          oDivMsg.innerHTML = `<span style="color:blue">注册成功 ${num}秒 后 跳转 首页面 点击跳转 <a href="./login.html">登录页</a></span>`;
        }, 1000)
      }
    }

  </script>
</body>

</html>